<template>
  <div class="m-notice">
    <div class="notice-title">预定须知</div>
    <hr/>
    <div class="tip1">
      <div>确认时间</div>
      <div>商家会在<span class="keynote">一小时内</span>确认，并发送<span class="keynote">短信通知</span></div>
    </div>
    <hr/>
    <div class="tip2">
      <div class="tip2-wrapper clear-float">
        <div>使用流程</div>
        <a href="" class="see-notice-icon"></a>
        <a href="" class="see-notice">查看注意事项</a>
      </div>
      <div class="r-line"></div>
      <div class="notice1 clear-float">
        <div class="order-num1">1</div>
        <div class="order-content1">
          <p class="keynote">获取商家确认短信</p>
          <p>预定成功后，商家会将确认邮件发送至您提供的邮箱。</p>
        </div>
      </div>
      <div class="notice2 clear-float">
        <div class="order-num2">2</div>
        <div class="order-content2">
          <p class="keynote">指定地换票</p>
          <p>在换票点出示确认短信即可兑换实体票。</p>
        </div>
      </div>
    </div>
    <hr/>
    <div class="tip3">
      <div>退改提示</div>
      <div class="keynote">指定日期前可退款</div>
      <p>使用日期前一天17：30前可申请退款；</p>
      <p>每笔订单需收取手续费10元；</p>
      <p>该商品只支持整单全退。</p>
      <p>退款说明：使用日期开始前2天可申请退款，以当天时间为准，使用日期开始前2天可申请退款，以当天时间为准，使用日期开始前2天可申请退款，以当天时间为准。</p>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'm-notice',
    data () {
      return {}
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .m-notice {
    width: 100%;
    height: 10.6rem;
    padding: 0.24rem 0.3rem;
    background-color: #FFF;
    border-top: 1px solid #D7D7D7;
    font-size: 0.28rem;
  }
  .keynote {
    color: #FF6633;
  }
  p {
    margin: 0;
  }

  .notice-title {
    width: 100%;
    font-size: 0.3rem;
    font-weight: bold;
    color: #333;
  }

  .tip1 > div:first-child, .tip2-wrapper > div:first-child, .tip3 > div:first-child {
    font-weight: bold;
    color: #333;
  }

  .tip1 > div:nth-child(2) {
    color: #666;
  }

  /*.clear-float:after {*/
    /*display: block;*/
    /*clear: both;*/
    /*content: '';*/
  /*}*/

  .tip2-wrapper {
    margin-bottom: 0.08rem;
  }

  .tip2-wrapper > div {
    float: left;
  }

  .tip2-wrapper > a {
    float: right;
    color: #999;
    font-size: 0.24rem;
  }

  .see-notice-icon {
    width: 0.304rem;
    height: 0.304rem;
    margin-left: 0.08rem;
  }
  .order-num1,.order-num2{
    width: 0.28rem;
    height: 0.28rem;
    line-height: 0.28rem;
    float: left;
    position: relative;
    z-index: 99;
    margin-right: 0.1rem;
    margin-top: 0.05rem;
    border-radius: 0.14rem;
    background-color: #FF6633;
    color: #FFF;
    text-align: center;
  }
  .order-content1>p:nth-child(2),.order-content2>p:nth-child(2){
    color: #666;
    margin-left: 0.4rem;
  }
  .tip2{
    position: relative;
  }
  .r-line{
    position: absolute;
    left: 0.13rem;
    top:0.81rem;
    width: 0;
    border-left:0.01rem solid #E1E1E1;
    height: 0.89rem;
    z-index: 1;
  }
  .tip3 > p {
    color: #666;
  }

  @media only screen and (-webkit-min-device-pixel-ratio: 1), only screen and (min--moz-device-pixel-ratio: 1), only screen and (-o-min-device-pixel-ratio: 1/1), only screen and (min-device-pixel-ratio: 1) {
    .see-notice-icon {
      background-image: url("../../assets/image/rightarraw.png");
      background-size: contain;
      background-repeat: no-repeat;
    }
  }

  @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (min-device-pixel-ratio: 1.5) {
    .see-notice-icon {
      background-image: url("../../assets/image/rightarraw@2x.png");
      background-size: contain;
      background-repeat: no-repeat;
    }
  }

  @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2) {
    .see-notice-icon {
      background-image: url("../../assets/image/rightarraw@3x.png");
      background-size: contain;
      background-repeat: no-repeat;
    }
  }
</style>
